import React from 'react';
import {View} from 'react-native';
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
import {createMaterialBottomTabNavigator} from '@react-navigation/material-bottom-tabs';
import {createMaterialTopTabNavigator} from '@react-navigation/material-top-tabs';

const MaterialTab = createMaterialBottomTabNavigator();
const Tab = createBottomTabNavigator();
const TopTab = createMaterialTopTabNavigator();

class NavigationUtil {
  static CreateMainNavigation(params) {
    return (
      <Tab.Navigator
        // 导航器首次加载时要渲染的路线的名称。
        initialRouteName={params.root}
        tabBarOptions={{
          activeTintColor:
            params.activeTintColor === null ? 'red' : params.activeTintColor, //活动标签的标签和图标颜色。(选中颜色)
          labelStyle: {
            fontSize: 15,
          },
        }}>
        {params.Screen.map((item, index) => {
          return (
            <Tab.Screen
              key={index}
              name={item.name}
              component={item.page}
              options={{
                tabBarIcon: ({focused, color, size}) => item.icon(size, color),
              }}
            />
          );
        })}
      </Tab.Navigator>
    );
  }

  static CreateMaterialNavigation(params) {
    return (
      <MaterialTab.Navigator
        initialRouteName={params.root}
        shifting={true}
        tabBarOptions={{
          labelStyle: {
            fontSize: 15
          },
        }}>
        {params.Screen.map((item, index) => {
          return (
            <MaterialTab.Screen
              name={item.name}
              key={index}
              component={item.page}
              options={{
                tabBarColor:
                  item.tabBarColor === null ? '#2f57ad' : item.tabBarColor,
                tabBarIcon: ({focused, color, size}) => item.icon(size, color),
              }}
            />
          );
        })}
      </MaterialTab.Navigator>
    );
  }

  static CreateMaterialTopTabNavigator(params) {
    return (
      <TopTab.Navigator
        initialRouteName={params.root}
        swipeEnabled={params.swipeEnabled} //指示是否启用滑动手
        tabBarOptions={{
          activeTintColor:
            params.activeTintColor === null ? '#2196F3' : '#4b4b4b',
          inactiveTintColor:
            params.inactiveTintColor === null ? '#2196F3' : '#4b4b4b',
          labelStyle: {
            fontSize: params.fontSize === null ? 15 : params.fontSize,
          },
        }}>
        {params.Screen.map((item, index) => {
          return (
            <TopTab.Screen
              name={item.name}
              key={index}
              component={item.page}
              options={{}}
              listeners={{
                state: () => {
                  if (item.listeners !== null) {
                    item.listeners(item.name);
                  }
                },
              }}
            />
          );
        })}
      </TopTab.Navigator>
    );
  }
}
export default NavigationUtil;
